<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       >
              <template slot="menuLeft">
                  <el-button @click="visible = true">上传图片</el-button>
              </template>
                <template slot="picUrl" slot-scope="scope" >
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.picUrl"
                            :preview-src-list="[scope.row.picUrl]"></el-image>
                </template>
            </avue-crud>
            <el-dialog @close="closeUpload" :visible.sync="visible" title="上传图片">
                <el-form>
                    <el-form-item label="上传类型" required>
                        <el-select v-model="uploadForm.type">
                            <el-option
                                v-for="item in picTypeList"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上传图片">
                        <el-upload
                            class="upload-demo"
                            :action="'/manage/api/manage/photo/uploadPhoto'"
                            :headers="headers"
                            :on-success="uploadPhotoSuccess"
                            :before-upload="beforeUpload"
                            :on-error="uploadError"
                            multiple
                            :show-file-list="false"
                            :data="uploadForm">
                            <el-button :disabled="!uploadForm.type" size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </basic-container>
    </div>
</template>

<script>
    import {fetchList} from '../../../api/manage/photogallery'
    import {tableOption} from '../../../const/crud/manage/photogallery'
    import {getStore} from "../../../util/store";
    import {fetchDict} from '../../../util/util';

    export default {
        name: 'photogallery',
        data() {
            return {
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption,
                visible: false,
                headers: {
                    Authorization: 'Bearer ' + getStore({name: 'access_token'}),
                    'TENANT-ID': getStore({name: 'tenantId'}),
                },
                uploadForm: {},
                picTypeList: [],
            }
        },
        created() {
            this.getHeight();
            fetchDict('scm_photo_type', this.picTypeList);
        },
        methods: {
            getHeight() {
                let tableHeight = Math.max(window.innerHeight - 360, 300);
                this.tableOption.maxHeight = tableHeight + 'px';
            },
            //上传
            uploadError(err, file) {
                this.$message.error(err.toString());
                return false;
            },
            closeUpload() {
                this.uploadForm = {};
                this.visible = false;
            },
            beforeUpload() {
                if(!this.uploadForm.type) {
                    this.$message.error('请先选择上传类型');
                    return false;
                } 
                return true;
            },
            uploadPhotoSuccess(){
              this.getList(this.page);
              this.$message.success("上传成功");
              this.closeUpload();
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                })
            },

            /**
             * 搜索回调
             */
            searchChange(form, done) {
                this.getList(this.page, form);
                done();
            },
            /**
             * 刷新回调
             */
            refreshChange(info) {
    this.getList(this.page, this.filterForm(info.searchForm));
}
        }
    }
</script>

<style lang="scss" scoped>
</style>
